<template>
    <div class="common-layout">
        <el-container>
            <el-header class="header">
                <div class="flex float-left headerLeft">
                    <img v-bind:src="logo" alt="" class="logo">
                    <div class="line"></div>
                    <p class="title ">战略微头条</p>
                </div>
                <div class="flex float-right headerRight">
                    <el-button type="primary" @click="handleExitPreview">退出预览</el-button>
                </div>
            </el-header>
        </el-container>
    </div>

    <div class="container">
        <img src="../../assets/phone-head.png" alt="" class="phone-head">
        <h1>战略微头条</h1>
        <hr />

        <h2 class="text-[30px] font-semibold text-balance">
            战略微头条<span class="text-[30px]">|</span>(NO.07)2024.08.05-08.11
        </h2>
        <div class="flex  items-center justify-center mt-10">
            <img src="../../assets/fangkuai1.png" class="w-5 h-5 mr-2">
            <img src="../../assets/fangkuai.png" class="w-5 h-5 mr-2">

            <span class="align-center border-y-2 border-blue-500 text-[50px] font-bold text-blue-500">新闻周报</span>
            <img src="../../assets/fangkuai.png" class="w-5 h-5 mr-2 ml-2">
            <img src="../../assets/fangkuai1.png" class="w-5 h-5 mr-2">
        </div>

        <div class="newsItem" v-for="(item, index) in releaseList" :key="index">
            <div class="news-content ">
                <!-- <img src="../../assets/{{ index+1 }}.png" class="w-5 h-5 mr-2"> -->
                <h3 class="news-title">{{ item && item.newsTitle ? item.newsTitle : '战略微头条' }}</h3>
                <div class="source">
                   {{ item && item.newsSource ? item.newsSource : null }}
                </div>
                <div class="mt-8">{{ item && item.abstractReal ? item.abstractReal : '这是第一条新闻的摘要内容' }}</div>


                <div @click="handlePreviewDetail(index)" class="text-[16px] font-shin text-blue-500 pt-5">阅读全文</div>
                <div class="footLine">
                    <div class="line-part"></div>
                    <div class="icon-part">
                        <img src="../../assets/skew.svg" alt="">
                        <img src="../../assets/skew.svg" alt="">
                        <img src="../../assets/skew.svg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import logo from '@/assets/logo.png'
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router' // 新增useRoute引入
const router = useRouter()
const route = useRoute()

const handlePreviewDetail = (index) => {
    router.push({ name: 'previewDetail' ,query:{id:index}})
}

const handleExitPreview = () => {
    router.push({
        name: 'post',
        query: { step: route.query.step }
    });
}

const releaseList = ref([])
const formData = ref(null)

onMounted(() => {
    try {
        // 获取新闻列表数据
        const newsListData = sessionStorage.getItem('previewNewsList')
        if (newsListData) {
            releaseList.value = JSON.parse(newsListData)
            console.log('预览新闻列表：', releaseList.value)
        }

        // 获取表单数据
        const formDataStr = sessionStorage.getItem('previewFormData')
        if (formDataStr) {
            formData.value = JSON.parse(formDataStr)
        }
        console.log('预览数据：', formData.value)

    } catch (error) {
        console.error('获取预览数据失败', error)
    }
})
</script>

<style scoped>
.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}

.header {
    height: 6vh;
    padding: 0;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
}

.headerLeft {
    padding: 1vh 0 0 2vw;
}

.headerRight {
    line-height: 6vh;
    padding-right: 1vw;
}

.container {
    height: 700px;
    max-width: 400px;
    margin: 80px auto;
    border: #000000 10px solid;
    box-sizing: border-box;
    border-radius: 50px;
    overflow: auto;
    scrollbar-width: none
}

.logo {
    width: 7vw;
    height: 4vh;
}

.line {
    width: 1px;
    height: 1.5vh;
    background-color: #eee;
    margin: 1.4vh 1.5vw 0;
}

.title {
    font-weight: 500;
    line-height: 4vh;
}

.active {
    background-color: #E8F6FE;
    border-color: #3E88CF;
    color: #438BD0
}

.phone-head {
    width: 100%;
}

h1 {
    text-align: center;
    font-size: 28px;
    font-weight: 900;
    font-size: 30px;
}

.footLine {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 10px;
}

.footLine .line-part {
    width: 70%;
    height: 1px;
    background-color: #3E88CF;
}

.footLine .icon-part {
    display: flex;
    align-items: center;
    gap: 6px;
}

.footLine .icon-part img {
    width: 20px;
    height: 20px;
}

.news-content {
    padding: 0 15px;
    margin-top: 20px;
}
.source{
    color: gray;
    margin-top: 10px;
}
.news-title {
    font-size: 25px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #333;
}
</style>    